<!-- 
* 功能-页面实现
* Date: 2023-9-12
* Author: 骆成洋
 -->
<template>
  <div class="main">
    <div class="left">
      <div class="left_up">
        <div class="left1">
          <layout-card headline="事件等级统计">
            <template #action>
              <!-- <div class="container"> -->
              <div class="card-content">
                <radio-Button-Group
                  :changeValue="radioValueOne"
                  :radioOptions="testOptions"
                  @change="radioChangeOne"
                />
              </div>
              <!-- </div> -->
            </template>
            <div class="btn">
              <el-row
                :gutter="12"
                style="
                  margin-top: -20px;
                  margin-left: 0px;
                  width: 580px;
                  padding-bottom: 16px;
                "
              >
                <el-col
                  :span="3"
                  style="
                    font-size: 14px;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  ><span>时间:</span></el-col
                >
                <el-col :span="12">
                  <el-date-picker
                    v-model="timeOne"
                    :type="timeTypeOne"
                    placeholder="YYYY/MM/DD"
                    @change="changeTimeOne"
                    :format="timeFormatOne"
                    value-format="YYYY-MM-DD"
                    :default-value="new Date()"
                  />
                </el-col>
              </el-row>
            </div>
            <div>
              <!-- 环状图形 -->
              <Ring
                v-if="show"
                ref="ring"
                myId="main1"
                :eventData="eventData2"
                :sumTotal="sumTotal2"
                :subTital="subTital2"
                :pieColors="pieColors2"
                layout="Horizontal"
                class="pieStyle"
              />
            </div>
          </layout-card>
        </div>
        <div class="left2">
          <layout-card headline="事件类型统计">
            <template #action>
              <!-- <div class="container"> -->
              <div class="card-content">
                <radio-Button-Group
                  :changeValue="radioValueTwo"
                  :radioOptions="testOptions"
                  @change="radioChangeTwo"
                />
              </div>
              <!-- </div> -->
            </template>
            <div class="btn">
              <el-row
                :gutter="12"
                style="
                  margin-top: -20px;
                  margin-left: 0px;
                  width: 580px;
                  padding-bottom: 16px;
                "
              >
                <el-col
                  :span="3"
                  style="
                    font-size: 14px;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  ><span>时间:</span></el-col
                >
                <el-col :span="12">
                  <el-date-picker
                    v-model="timeTwo"
                    :type="timeTypeTwo"
                    placeholder="YYYY/MM/DD"
                    :format="timeFormatTwo"
                    value-format="YYYY-MM-DD"
                    :default-value="new Date()"
                    @change="changeTimeTwo"
                  />
                </el-col>
              </el-row>
            </div>
            <!-- 环状图形 -->
            <Ring
              v-if="showTwo"
              ref="ring"
              myId="main3"
              :eventData="eventData"
              :sumTotal="sumTotal"
              :subTital="subTital"
              :pieColors="pieColors"
              layout="Horizontal"
              class="pieStyle"
            />
          </layout-card>
        </div>
      </div>
      <div class="left_bottom">
        <layout-card headline="事件发生时段统计">
          <template #action>
            <div class="card-content">
              <div class="contnt-top">
                <div class="time">
                  <el-row
                    :gutter="12"
                    style="
                      margin-top: -4px;
                      position: relative;
                      width: 580px;
                      padding-bottom: 16px;
                    "
                  >
                    <el-col
                      :span="3"
                      style="
                        font-size: 14px;
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      "
                      ><span style="position: relative; right: -110px"
                        >时间:</span
                      ></el-col
                    >
                    <el-col :span="12">
                      <el-date-picker
                        v-model="timeThree"
                        :type="timeTypeThree"
                        placeholder="YYYY/MM/DD"
                        :format="timeFormatThree"
                        value-format="YYYY-MM-DD"
                        :default-value="new Date()"
                        @change="changeTimeThree"
                        style="position: relative; right: -110px"
                      />
                    </el-col>
                  </el-row>
                </div>
                <radio-Button-Group
                  :changeValue="radioValueThree"
                  :radioOptions="testOptions"
                  @change="radioChangeThree"
                />
              </div>
            </div>
          </template>
          <!-- 柱状图 -->
          <Bar
            v-if="showThree"
            ref="bar"
            myId="main2"
            :barData="barData"
            :barAttr="barAttr"
            :barXData="barXData"
            :barColor="barColor"
            class="barStyle"
            layout="normal"
            style="margin-left: 100px"
          />
        </layout-card>
      </div>
    </div>

    <div class="right">
      <layout-card headline="事件分析报告">
        <template #action>
          <!-- <div class="container"> -->
          <div class="card-content">
            <radio-Button-Group
              :changeValue="radioValueFour"
              :radioOptions="testOptions"
              @change="radioChangeFour"
            />
          </div>
          <!-- </div> -->
        </template>
        <div class="btn">
          <el-row
            :gutter="12"
            style="
              margin-top: -20px;
              margin-left: 0px;
              width: 580px;
              padding-bottom: 16px;
            "
          >
            <el-col
              :span="3"
              style="
                font-size: 14px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
              "
              ><span>时间:</span></el-col
            >
            <el-col :span="12">
              <el-date-picker
                v-model="timeFour"
                :type="timeTypeFour"
                placeholder="YYYY/MM/DD"
                :format="timeFormatFour"
                value-format="YYYY-MM-DD"
                :default-value="new Date()"
                @change="changeTimeFour"
              />
            </el-col>
          </el-row>
        </div>
        <table-common
          :columns="exampleColumns"
          :loading="loading"
          :pagination="pager"
          :table-data="tableData"
          size="large"
          @current-change="currentChange"
          @size-change="sizeChange"
          @sort-change="sortChange"
          stripe
          :height="730"
          style="height: 70vh"
        >
          <template #action="{ row }">
            <!-- 自定义操作栏示例  -->
            <el-button
              class="link-btn"
              @click="handleLook(row)"
              link
              type="primary"
              >查看</el-button
            >
          </template>
        </table-common>
        <div style="height: 45px"></div>
      </layout-card>
    </div>
    <edit-dialog
      :centerDialogVisible="editDialogVisible"
      :defaultButton="false"
      :tilte="editTilte"
      :key="timer"
      v-model="diagForm"
      :tilteAlign="true"
      :showClose="false"
      :width="600"
      @Cancel="Cancel"
      @Submit="SubmitEdit"
    >
      <template #content>
        <ul style="list-style: none">
          <li>
            <div>
              <span>领导批示：</span> <span>{{ diagForm.leaderDesc }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>现场反馈：</span> <span> {{ diagForm.onSiteFeed }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>事件处理方式评估：</span>
              <span>{{ diagForm.eventHandMethod }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>事件处理过程评估：</span>
              <span>{{ diagForm.eventHandProcess }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>总结评估：</span>
              <span>{{ diagForm.sumEstimate }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>分析评价：</span> <span>{{ diagForm.analyEstimate }}</span>
            </div>
          </li>
          <li>
            <div>
              <span>备注：</span> <span>{{ diagForm.remark }}</span>
            </div>
          </li>
          <li>
            <div style="display: flex">
              <span>总结评估报告：</span>
              <span
                style="
                  background-color: rgb(234, 232, 230);
                  width: 300px;
                  height: 35px;
                  border-radius: 5px;
                  line-height: 35px;
                  padding-left: 20px;
                "
                @click="checkFile1()"
                v-if="diagForm.report"
                >{{ diagForm.report.enclosureContent }}</span
              >
            </div>
          </li>
          <li>
            <div style="display: flex">
              <span
                >其他附件:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
              >
              <div style="display: flex; flex-direction: column">
                <!-- 其他附件第一个块 -->
                <span
                  style="
                    background-color: rgb(234, 232, 230);
                    width: 300px;
                    height: 70px;
                    border-radius: 5px;
                    line-height: 70px;
                    padding-left: 20px;
                  "
                  @click="checkFile2(item.resourceAddress)"
                  v-if="diagForm.otherAnnex"
                  v-for="(item, index) in diagForm.otherAnnex"
                  :key="index"
                  >{{ item.enclosureContent }}
                </span>
                <!-- 其他附件第二个块 -->
                <!-- <span
                  style="
                    background-color: rgb(234, 232, 230);
                    width: 300px;
                    height: 35px;
                    margin-top: 20px;
                    border-radius: 5px;
                    line-height: 35px;
                    padding-left: 20px;
                  "
                  @click="checkFile3()"
                  v-if="diagForm.otherAnnex"
                  >{{ diagForm.otherAnnex }}
                </span> -->
              </div>
            </div>
          </li>
        </ul>
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button type="info" plain @click="editDialogVisible = false"
            >关闭</el-button
          >
        </span>
      </template>
    </edit-dialog>

    <!-- 文件预览弹窗 -->
    <edit-dialog
      :centerDialogVisible="centerDialogPreviewVisible"
      tilte="文件预览"
      :key="timer"
      :width="1000"
      align-center
      :defaultButton="false"
      @cancel="previewCancel"
    >
      <template #content>
        <vue-office-docx
          :src="doc"
          style="width: 100%; height: 400px"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
      </template>
    </edit-dialog>
  </div>
</template>

<script lang="ts" setup>
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
import { ref, onBeforeMount, reactive, onMounted } from "vue";
import LayoutCard from "@/components/LayoutCard/index.vue";
import TableCommon from "@/components/TableCommon/index.vue";
import RadioButtonGroup from "@/components/RadioButtonGroup/index.vue";
import { exampleColumns } from "@/views/eventManage/eventaAnalysis/config/columns";
import { exampleOptions } from "@/views/eventManage/eventaAnalysis/config/filters";
import {
  problemPageList,
  viewEvent,
  eventLevel,
  eventType,
  eventFrequencyBand,
} from "@/api/eventManage/eventaAnalysis";

import { dayjs } from "element-plus";
import editDialog from "@/components/editDialog/index.vue";
import Ring from "@/components/echarts/ring.vue";
import Bar from "@/components/echarts/bar.vue";
import radioButtonGroup from "@/components/RadioButtonGroup/index.vue";
import { fa } from "element-plus/es/locale";

const editDialogVisible = ref(false);
const editTilte = ref("事件总结评估详情");
const diagForm = ref();

// //图表相关操作
const eventData = ref([]); // 环形图数据
const sumTotal = ref(""); // 环形图中间文字内容
const subTital = ref(""); // 环形图中间子标题文字内容
const pieColors = ref([]); // 环形图各数据分段颜色，有几组数据就有几组颜色

const eventData2 = ref([]); // 环形图2数据
const sumTotal2 = ref(""); // 环形图2中间文字内容
const subTital2 = ref(""); // 环形图2中间子标题文字内容
const pieColors2 = ref([]); // 环形图2各数据分段颜色，有几组数据就有几组颜色

const radioValueOne = ref(1); // 时间按钮值1
const radioValueTwo = ref(1); // 时间按钮值2
const radioValueThree = ref(1); // 时间按钮值3
const radioValueFour = ref(1); // 时间按钮值4

const barData = ref([]); // 柱形图数据
const barAttr = ref([]); // 柱形图属性
const barColor = ref([]); // 柱形图颜色组
const barXData = ref([]); // 柱形图横轴数据
const ring = ref(null); // 对环形图的引用
const bar = ref(null); // 对柱形图的引用

const timeTypeOne = ref("date");
const timeFormatOne = ref("YYYY-MM-DD");
const timeTypeTwo = ref("date");
const timeFormatTwo = ref("YYYY-MM-DD");
const timeTypeThree = ref("date");
const timeFormatThree = ref("YYYY-MM-DD");
const timeTypeFour = ref("date");
const timeFormatFour = ref("YYYY-MM-DD");

const timeOne = ref(); //环形图1选择的时间
const timeTwo = ref(); //环形图2选择的时间
const timeThree = ref(); //柱形图选择的时间
const timeFour = ref(); //表格选择时间
const testOptions = ref([
  { label: "日", value: 1 },
  { label: "周", value: 2 },
  { label: "月", value: 3 },
  { label: "年", value: 4 },
]);

// 时间戳，用于确保弹窗页面能加载不同的界面
const timer = ref();

// 弹窗取消按钮事件
const Cancel = () => {
  editDialogVisible.value = false;
};
// 弹窗确认按钮事件
const SubmitEdit = () => {
  editDialogVisible.value = false;
};

const isExampleOptions = ref(exampleOptions);

interface SearchType {
  terminal: string;
  serviceName: string;
  isDisable: string;
  serviceType: string;
  order: string[];
}
const isDisabled = ref(true);
const loading = ref(false);
const tableData = ref([]);
// 分页数据
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 1,
  condition: {},
});

/**
 * 功能-查看事件分析报告
 * Date: 2023-9-15
 * Author: 侯强
 */
const handleLook = async (val) => {
  const payload = {
    eventReportId: val.id,
  };
  const res = await viewEvent(payload);
  diagForm.value = res.data;
  editDialogVisible.value = true;
};

/* 功能-获取日期，加载默认时间
 * Date: 2023-9-19
 * Author: 侯强
 */
const getTime = () => {
  let today = new Date();
  //日期
  let DD = String(today.getDate()).padStart(2, "0"); // 获取今日
  let MM = String(today.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let YYYY = String(today.getFullYear()); // 获取年
  let startTimeDay = YYYY + "-" + MM + "-" + DD;
  timeOne.value = startTimeDay;
  timeTwo.value = startTimeDay;
  timeThree.value = startTimeDay;
  timeFour.value = startTimeDay;
};

/* 功能-获取日期，日期处理
 * Date: 2023-9-19
 * Author: 侯强
 */
const getTimeDay = (selectTime) => {
  let today = selectTime == undefined ? new Date() : new Date(selectTime);
  //日期
  let DD = String(today.getDate()).padStart(2, "0"); // 获取今日
  let MM = String(today.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let YYYY = String(today.getFullYear()); // 获取年
  let startTimeDay = YYYY + "-" + MM + "-" + DD;
  today.setDate(today.getDate() + 1);
  let dd = String(today.getDate()).padStart(2, "0"); // 获取明日
  let mm = String(today.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let yyyy = String(today.getFullYear()); // 获取年
  let endTimeDay = yyyy + "-" + mm + "-" + dd;
  let day = [startTimeDay, endTimeDay];
  return day;
};

/* 功能-获取周，周处理
 * Date: 2023-9-19
 * Author: 侯强
 */
const getTimeWeek = (selectTime) => {
  // 获取本周
  const current = selectTime == undefined ? new Date() : new Date(selectTime);
  // current是本周的第几天
  let nowDayOfWeek = current.getDay();
  if (nowDayOfWeek === 0) nowDayOfWeek = 7;
  const dayNum = 1 * 24 * 60 * 60 * 1000;
  // 获取本周星期一的时间，星期一作为一周的第一天
  const firstDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * dayNum);
  // 获取本周星期天的时间，星期天作为一周的最后一天
  const lastDate = new Date(new Date(firstDate).valueOf() + 6 * dayNum);
  let startTime = new Date(firstDate);
  let endTime = new Date(lastDate);
  let DD = String(startTime.getDate()).padStart(2, "0"); // 获取星期一
  let MM = String(startTime.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let YYYY = String(startTime.getFullYear()); // 获取年
  let startTimeWeek = YYYY + "-" + MM + "-" + DD;

  let dd = String(endTime.getDate()).padStart(2, "0"); // 获取星期天
  let mm = String(endTime.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let yyyy = String(endTime.getFullYear()); // 获取年
  let endTimeWeek = yyyy + "-" + mm + "-" + dd;

  endTime.setDate(endTime.getDate() + 1); //下个星期一
  let d = String(endTime.getDate()).padStart(2, "0"); // 获取明日
  let m = String(endTime.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let y = String(endTime.getFullYear()); // 获取年
  let T = y + "-" + m + "-" + d;
  let day = [startTimeWeek, endTimeWeek, T];
  return day;
};

/* 功能-获取月份，月份处理
 * Date: 2023-9-19
 * Author: 侯强
 */
const getTimeMonth = (selectTime) => {
  let today = selectTime == undefined ? new Date() : new Date(selectTime);
  //日期

  let MM = String(today.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let YYYY = String(today.getFullYear()); // 获取年
  let startTimeMonth = YYYY + "-" + MM + "-" + "01";
  today.setMonth(today.getMonth() + 1);
  let mm = String(today.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
  let yyyy = String(today.getFullYear()); // 获取年
  let endTimeMonth = yyyy + "-" + mm + "-" + "01";
  let day = [startTimeMonth, endTimeMonth];
  return day;
};
/* 功能-获取年份，年份处理
 * Date: 2023-9-19
 * Author: 侯强
 */
const getTimeYear = (selectTime) => {
  let today = selectTime == undefined ? new Date() : new Date(selectTime);
  //日期
  let YYYY = String(today.getFullYear()); // 获取年
  let startTimeYear = YYYY + "-" + "01" + "-" + "01";
  today.setFullYear(today.getFullYear() + 1);
  let yyyy = String(today.getFullYear()); // 获取年
  let endTimeYear = yyyy + "-" + "01" + "-" + "01";
  let day = [startTimeYear, endTimeYear];
  return day;
};

// 图表数据查询参数
const payload = ref({
  startTime: getTimeDay(timeOne.value)[0] + " 00:00:00",
  endTime: getTimeDay(timeOne.value)[1] + " 00:00:00",
});

// 表格数据查询参数
const payloaded = ref({
  pageNum: pager.currentPage,
  pageSize: pager.pageSize,
  condition: {
    startTime: getTimeDay(timeFour.value)[0] + " 00:00:00",
    endTime: getTimeDay(timeFour.value)[1] + " 00:00:00",
  },
});
/* 功能-获取事件等级统计数据
 * Date: 2023-9-15
 * Author: 侯强
 */
const show = ref(false);
const eventLevelStatistics = async () => {
  eventData2.value = [];
  let event = [];

  const res = await eventLevel(payload.value);
  sumTotal2.value = "";
  subTital2.value = "";

  for (const key in res.data) {
    const value = res.data[key];
    const newObject = {
      value: value,
      name: key,
    };

    event.push(newObject);
  }

  eventData2.value = event;
  let sum2 = 0;
  eventData2.value.forEach((e) => {
    sum2 += e.value;
  });

  sumTotal2.value = sum2;

  subTital2.value = "事件总数";
  pieColors2.value = ["#FEA731", "#366af9", "#FFE977"]; // 颜色组
  show.value = true;
  ring.value.show();
};

/* 功能-获取事件类型统计数据
 * Date: 2023-9-15
 * Author: 侯强
 */
const showTwo = ref(false);
const eventTypeStatistics = async () => {
  eventData.value = [];
  let event = [];
  const res = await eventType(payload.value);

  for (const key in res.data) {
    const value = res.data[key];
    const newObject = {
      value: value,
      name: key,
    };
    event.push(newObject);
  }

  showTwo.value = true;
  eventData.value = event;
  // 计算总数量
  var sum = 0;
  eventData.value.forEach((e) => {
    sum += e.value;
  });
  // 以下三个均为赋值操作
  sumTotal.value = sum + "";
  subTital.value = "事件总量";
  pieColors.value = ["#61eefe", "#81d3f8", "#366af9", "#2eb9ff"]; // 颜色组
  ring.value.show();
};

/* 功能-获取事件发生频段统计数据
 * Date: 2023-9-15
 * Author: 侯强
 */
const showThree = ref(false);
const eventFrequencyBandStatistics = async () => {
  const res = await eventFrequencyBand(payload.value);
  let s = res.data;
  let dataOne = [];
  let dataTwo = [];
  let dataThree = [];
  // 获取所有小时的数组，按照升序排列
  const hours = Object.keys(s)
    .map(Number)
    .sort((a, b) => a - b);
  // 遍历每个小时
  for (let hour = 0; hour < 24; hour++) {
    let one = {
      name: "一类事件",
      data: 0,
    };
    let two = {
      name: "二类事件",
      data: 0,
    };
    let three = {
      name: "三类事件",
      data: 0,
    };
    // 检查该小时是否在 s 对象中
    if (hours.includes(hour)) {
      // 获取该小时对应的一类事件值，若不存在则为0
      one.data = s[hour]["一类事件"] || 0;
      two.data = s[hour]["二类事件"] || 0;
      three.data = s[hour]["三类事件"] || 0;
    }

    dataOne.push(one.data);
    dataTwo.push(two.data);
    dataThree.push(three.data);
  }

  showThree.value = true;
  // 以下为柱形图数据设置***数据实际字段根据接口结果进行调整
  barAttr.value = ["name", "data"]; // 该值对应从接口获取的实际字段值
  barColor.value = ["#476EFF", "#FFE977", "#F59A23"];
  barData.value = [
    {
      name: "一类事件",
      data: dataOne,
    },
    {
      name: "二类事件",
      data: dataTwo,
    },
    {
      name: "三类事件",
      data: dataThree,
    },
  ];
  barXData.value = [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20",
    "21",
    "22",
    "23",
  ];

  bar.value.show();
};

/**
 * 功能-获取表格数据、分页查询
 * Date: 2023-9-15
 * Author: 侯强
 */
const getData = async () => {
  loading.value = true;
  // 查询条件
  // // 分页信息列表
  console.log(payloaded.value, 22);
  const res = await problemPageList(payloaded.value);
  loading.value = false;

  tableData.value = res.data.list;

  pager.total = res.data.total;
  pager.pageCount = Math.ceil(pager.total / pager.pageSize);
  if (!res.data.total) {
    pager.pageCount = 1;
  }
};
/**
 * 分页
 */
const sizeChange = (size: number) => {
  pager.pageSize = size;
  payloaded.value.pageSize = size;
  getData();
};

/**
 * 每页条数改变时触发
 */
const currentChange = (value: number) => {
  pager.currentPage = value;
  payloaded.value.pageNum = value;
  getData();
};

/* 功能-日期选择器改变时重新请求数据
 * Date: 2023-9-19
 * Author: 侯强
 */
const changeTimeOne = (val) => {
  if (timeTypeOne.value == "date") {
    payload.value.startTime = getTimeDay(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeDay(timeOne.value)[1] + " 00:00:00";
  } else if (timeTypeOne.value == "week") {
    payload.value.startTime = getTimeWeek(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeWeek(timeOne.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeOne.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeOne.value)[1].split("-");
    timeFormatOne.value = "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
  } else if (timeTypeOne.value == "month") {
    payload.value.startTime = getTimeMonth(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeMonth(timeOne.value)[1] + " 00:00:00";
  } else if (timeTypeOne.value == "year") {
    payload.value.startTime = getTimeYear(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeYear(timeOne.value)[1] + " 00:00:00";
  }
  eventLevelStatistics();
  eventLevelStatistics();
};
const changeTimeTwo = (val) => {
  if (timeTypeTwo.value == "date") {
    payload.value.startTime = getTimeDay(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeDay(timeTwo.value)[1] + " 00:00:00";
  } else if (timeTypeTwo.value == "week") {
    payload.value.startTime = getTimeWeek(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeWeek(timeTwo.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeTwo.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeTwo.value)[1].split("-");
    timeFormatTwo.value = "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
  } else if (timeTypeTwo.value == "month") {
    payload.value.startTime = getTimeMonth(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeMonth(timeTwo.value)[1] + " 00:00:00";
  } else if (timeTypeTwo.value == "year") {
    payload.value.startTime = getTimeYear(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeYear(timeTwo.value)[1] + " 00:00:00";
  }
  eventTypeStatistics();
  eventTypeStatistics();
};
const changeTimeThree = (val) => {
  if (timeTypeThree.value == "date") {
    payload.value.startTime = getTimeDay(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeDay(timeThree.value)[1] + " 00:00:00";
  } else if (timeTypeThree.value == "week") {
    payload.value.startTime = getTimeWeek(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeWeek(timeThree.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeThree.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeThree.value)[1].split("-");
    timeFormatThree.value =
      "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
  } else if (timeTypeThree.value == "month") {
    payload.value.startTime = getTimeMonth(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeMonth(timeThree.value)[1] + " 00:00:00";
  } else if (timeTypeThree.value == "year") {
    payload.value.startTime = getTimeYear(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeYear(timeThree.value)[1] + " 00:00:00";
  }
  eventFrequencyBandStatistics();
  eventFrequencyBandStatistics();
};

const changeTimeFour = (val) => {
  if (timeTypeFour.value == "date") {
    payloaded.value.condition.startTime =
      getTimeDay(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeDay(timeFour.value)[1] + " 00:00:00";
  } else if (timeTypeFour.value == "week") {
    payloaded.value.condition.startTime =
      getTimeWeek(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeWeek(timeFour.value)[1] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeFour.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeFour.value)[1].split("-");
    timeFormatFour.value =
      "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
  } else if (timeTypeFour.value == "month") {
    payloaded.value.condition.startTime =
      getTimeMonth(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeMonth(timeFour.value)[1] + " 00:00:00";
  } else if (timeTypeFour.value == "year") {
    payloaded.value.condition.startTime =
      getTimeYear(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeYear(timeFour.value)[1] + " 00:00:00";
  }
  getData();
  getData();
};

/* 功能-按钮改变时更改日期选择器的类别并重新请求数据
 * Date: 2023-9-19
 * Author: 侯强
 */
const radioChangeOne = (value) => {
  radioValueOne.value = value;
  if (value === 1) {
    timeTypeOne.value = "date";
    timeFormatOne.value = "YYYY-MM-DD";
    payload.value.startTime = getTimeDay(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeDay(timeOne.value)[1] + " 00:00:00";

    eventLevelStatistics();
    return;
  } else if (value === 2) {
    timeTypeOne.value = "week";
    // timeFormatOne.value = '[第]ww[周](MM-DD'
    payload.value.startTime = getTimeWeek(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeWeek(timeOne.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeOne.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeOne.value)[1].split("-");
    timeFormatOne.value = "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
    eventLevelStatistics();
    return;
  } else if (value === 3) {
    timeTypeOne.value = "month";
    timeFormatOne.value = "YYYY-MM";
    payload.value.startTime = getTimeMonth(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeMonth(timeOne.value)[1] + " 00:00:00";

    eventLevelStatistics();
    return;
  } else {
    timeTypeOne.value = "year";
    timeFormatOne.value = "YYYY";
    payload.value.startTime = getTimeYear(timeOne.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeYear(timeOne.value)[1] + " 00:00:00";

    eventLevelStatistics();
  }
};

const radioChangeTwo = (value) => {
  radioValueTwo.value = value;
  if (value == 1) {
    timeTypeTwo.value = "date";
    timeFormatTwo.value = "YYYY-MM-DD";
    payload.value.startTime = getTimeDay(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeDay(timeTwo.value)[1] + " 00:00:00";

    eventTypeStatistics();
  } else if (value == 2) {
    timeTypeTwo.value = "week";
    payload.value.startTime = getTimeWeek(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeWeek(timeTwo.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeTwo.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeTwo.value)[1].split("-");
    timeFormatTwo.value = "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
    eventTypeStatistics();
  } else if (value == 3) {
    timeTypeTwo.value = "month";
    timeFormatTwo.value = "YYYY-MM";
    payload.value.startTime = getTimeMonth(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeMonth(timeTwo.value)[1] + " 00:00:00";

    eventTypeStatistics();
  } else {
    timeTypeTwo.value = "year";
    timeFormatTwo.value = "YYYY";
    payload.value.startTime = getTimeYear(timeTwo.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeYear(timeTwo.value)[1] + " 00:00:00";

    eventTypeStatistics();
  }
};

const radioChangeThree = (value) => {
  radioValueThree.value = value;
  if (value == 1) {
    timeTypeThree.value = "date";
    timeFormatThree.value = "YYYY-MM-DD";
    payload.value.startTime = getTimeDay(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeDay(timeThree.value)[1] + " 00:00:00";
    eventFrequencyBandStatistics();
  } else if (value == 2) {
    timeTypeThree.value = "week";
    payload.value.startTime = getTimeWeek(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeWeek(timeThree.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeThree.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeThree.value)[1].split("-");
    timeFormatThree.value =
      "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
    eventFrequencyBandStatistics();
  } else if (value == 3) {
    timeTypeThree.value = "month";
    timeFormatThree.value = "YYYY-MM";
    payload.value.startTime = getTimeMonth(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeMonth(timeThree.value)[1] + " 00:00:00";
    eventFrequencyBandStatistics();
  } else {
    timeTypeThree.value = "year";
    timeFormatThree.value = "YYYY";
    payload.value.startTime = getTimeYear(timeThree.value)[0] + " 00:00:00";
    payload.value.endTime = getTimeYear(timeThree.value)[1] + " 00:00:00";
    eventFrequencyBandStatistics();
  }
};

const radioChangeFour = (value) => {
  radioValueFour.value = value;
  if (value == 1) {
    timeTypeFour.value = "date";
    timeFormatFour.value = "YYYY-MM-DD";
    payloaded.value.condition.startTime =
      getTimeDay(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeDay(timeFour.value)[1] + " 00:00:00";
    getData();
  } else if (value == 2) {
    timeTypeFour.value = "week";
    payloaded.value.condition.startTime =
      getTimeWeek(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeWeek(timeFour.value)[2] + " 00:00:00";
    const [Y, M, D] = getTimeWeek(timeFour.value)[0].split("-");
    const [y, m, d] = getTimeWeek(timeFour.value)[1].split("-");
    timeFormatFour.value =
      "[第]ww[周](" + M + "/" + D + "-" + m + "/" + d + ")";
    getData();
  } else if (value == 3) {
    timeTypeFour.value = "month";
    timeFormatFour.value = "YYYY-MM";
    payloaded.value.condition.startTime =
      getTimeMonth(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeMonth(timeFour.value)[1] + " 00:00:00";
    getData();
  } else {
    timeTypeFour.value = "year";
    timeFormatFour.value = "YYYY";
    payloaded.value.condition.startTime =
      getTimeYear(timeFour.value)[0] + " 00:00:00";
    payloaded.value.condition.endTime =
      getTimeYear(timeFour.value)[1] + " 00:00:00";
    getData();
  }
};
//文件地址
const doc = ref("");
const centerDialogPreviewVisible = ref(false);
const checkFile1 = () => {
  doc.value = diagForm.value.report.resourceAddress;
  centerDialogPreviewVisible.value = true;
};
const checkFile2 = (resourceAddress: any) => {
  doc.value = resourceAddress;
  centerDialogPreviewVisible.value = true;
};
const previewCancel = () => {
  centerDialogPreviewVisible.value = false;
};

onBeforeMount(getData);
onBeforeMount(getTime);
onBeforeMount(eventLevelStatistics);
onBeforeMount(eventTypeStatistics);
onBeforeMount(eventFrequencyBandStatistics);
</script>
<style scoped>
.time {
  margin-top: 21px;
  position: relative;
  left: 150px;
}
.contnt-top {
  display: flex;
  overflow: hidden;
}
.container .card-content {
  padding-top: 10px;
  margin: 0;
  border-radius: 8px;
}
.btn {
  margin-left: -3.2%;
  width: 100%;
}
.main {
  display: flex;
}
.left {
  flex: 3;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.left1 {
  flex: 1;
}
.left2 {
  flex: 1;
}
.left_up {
  flex: 1;
  display: flex;
  flex-direction: row;
  height: 20%;
}
.left_bottom {
  flex: 1;
}
.right {
  flex: 1;
}
li {
  margin-left: 100px;
  margin-top: 20px;
}
li,
span {
  margin-left: 20px;
}
.pieStyle {
  width: 70%;
  height: 310px;
  border-radius: 8px;
  margin-left: 70px;
  position: relative;
  top: -27px;
}
.barStyle {
  width: 1000px;
  height: 300px;
  background-color: #fff;
  border-radius: 8px;
  margin: 10px;
  position: relative;
  bottom: 40px;
}
.el-table__inner-wrapper {
  height: 750px;
}
</style>

